<script setup lang="ts">
import { ref } from "vue";
import { useRole } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";

import Eye from "~icons/ri/Eye-line";

import PerformanceInfo from "./form/index.vue"

defineOptions({
  name: "teamManagementPerformance"
});

const PerformanceInfoRef = ref();
const {
  permissions,

  loading,
  columns,
  dataList,
  pagination,

  onSearch,
  lookInfo,
  handleSizeChange,
  handleCurrentChange,
} = useRole(PerformanceInfoRef);
</script>

<template>
  <div class="main">
    <PureTableBar
      title=""
      :columns="columns"
      @refresh="onSearch"
      :key="columns.length"
    >
      <template v-slot="{ size, dynamicColumns }">
        <pure-table
          align-whole="center"
          showOverflowTooltip
          table-layout="auto"
          :loading="loading"
          :size="size"
          adaptive
          :adaptiveConfig="{ offsetBottom: 108 }"
          :data="dataList"
          :columns="dynamicColumns"
          :pagination="{ ...pagination, size }"
          :header-cell-style="{
            background: 'var(--el-fill-color-light)',
            color: 'var(--el-text-color-primary)'
          }"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
          <template #operation="{ row }">
            <el-button
              v-if="permissions.is_single_see"
              class="reset-margin"
              type="primary"
              :size="size"
              :icon="useRenderIcon(Eye)"
              @click="lookInfo(row)"
            >
              查看
            </el-button>
          </template>
        </pure-table>
      </template>
    </PureTableBar>

    <!-- 业绩详情 -->
    <PerformanceInfo ref="PerformanceInfoRef"></PerformanceInfo>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-dropdown-menu__item i) {
  margin: 0;
}

:deep(.el-form--inline .el-form-item) {
  margin-right: 12px;
}

:deep(.handleButton) {
  margin-top: 30px;
}

.main {
  margin: 12px 12px 0 !important;
}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 12px;
  }
}
</style>
